<template>
  <div style="flex: 1">
    <ul class="target-list">
      <li v-for="(item, i) in targetList" :key="i" :style="{ marginRight: (item.line || 0) + 'px' }">
        <p class="title">
          <span>{{ item.name }}</span>
          <span v-if="item.unit">({{ item.unit }})</span>
          <a-popover v-if="item.tip">
            <template #content>
              <p style="width: 400px">{{ item.tip }}</p>
            </template>
            <icon-question-circle style="margin-left: 4px" />
          </a-popover>
        </p>
        <p>
          <span class="val">{{ item.value }}</span>
          <span class="total-label">总计</span>
        </p>
      </li>
    </ul>
    <div ref="channelsChart" class="chart-item"> </div>
  </div>
</template>

<script lang="ts" setup>
  import useEcharts from '@/hooks/useEcharts'
  import { ref, onMounted, nextTick, onBeforeUnmount, PropType } from 'vue'
  import Title from './Title.vue'
  import { dispose } from 'echarts/core'
  const props = defineProps({
    targetList: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
    xData: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
    checkedKeys: {
      type: Array as PropType<Array<string>>,
      default: () => [],
    },
    dataMap: {
      type: Object,
      default: () => {},
    },
    allowSwitch: {
      type: Boolean,
      default: true,
    },
  })

  const loading = ref(true)
  const channelsChart = ref<HTMLDivElement | null>(null)
  const init = () => {
    const option = {
      color: ['rgb(54,203,203)', 'rgb(94,178,255)'],
      tooltip: {
        trigger: 'item',
      },
      legend: {
        bottom: '5%',
        left: 'center',
      },
      label: {
        show: true,
        formatter(param: any) {
          // correct the percentage
          return `${param.name}\n(${param.percent * 2}%)`
        },
      },
      series: [
        {
          type: 'pie',
          radius: ['35%', '60%'],
          center: ['50%', ' 50%'],
          startAngle: 60,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          labelLine: {
            length: 10,
            length2: 10,
            maxSurfaceAngle: 100,
          },
          data: props.targetList,
        },
      ],
    }
    setTimeout(() => {
      loading.value = false
      nextTick(() => {
        useEcharts(channelsChart.value as HTMLDivElement).setOption(option)
      })
    }, 1000)
  }
  const updateChart = () => {
    useEcharts(channelsChart.value as HTMLDivElement).resize()
  }
  onMounted(init)
  onBeforeUnmount(() => {
    dispose(channelsChart.value as HTMLDivElement)
  })
</script>

<style lang="less" scoped>
  .target-list {
    display: flex;
    li {
      width: 48%;
      border: 1px solid #eee;
      padding: 10px;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      .title {
        color: #666;
      }
      .total-label {
        margin-left: 5px;
        color: #666;
      }
      .val {
        font-weight: bold;
        font-size: 16px;
      }
    }
  }
  .chart-item {
    height: 305px;
  }
</style>
